<!DOCTYPE html>
<html>

<head>
    <% include global/meta.html %>
        <% include global/top-css.html %>
            <title>yuscms</title>
</head>

<body>

    <main class="main" data-info="<%=admin.permission%>">
        <div class="ys-admin-pos c-a1a3aa">
            首页
            <span class="f-sum">></span>
            <span class="c-565b6d">轮播管理</span>
            <span class="f-sum">></span>
            <span class="c-565b6d">新增</span>
        </div>

        <div class="ys-admin-tablist">
            <div class="ys-admin-tab-header row justify-content-b">
                <p class="f-14 c-565b6d pl-8 pt-6"></p>
            </div>

            <div class="mr-10 ml-10">
                <form @submit.prevent="checkForm" name="form">
                    <ul class="overflow-h pb-20">

                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">轮&nbsp; 播&nbsp; 图</label>
                            </div>

                            <div class="col-bd row c-666">
                                <img v-if="params.img" class="thumb" :src="params.img" alt="">
                                <span class="ico-camera">
                                    <input @change="sendThumb" type="file" name="img" id="thumb">
                                </span>
                            </div>
                            <div class="col-ft col-16 c-999" id="thumb">
                                (缩略图必须是jpg,gif,png,并且200k之内)
                            </div>

                        </li>
                        <li class="row  pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">链　　接</label>
                            </div>
                            <div class="col-10">
                                <input type="text" name="url" v-model="params.url" placeholder="" class="input" />
                            </div>
                        </li>
                        <li class="row  pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">标　　题</label>
                            </div>
                            <div class="col-10">
                                <input type="text" name="title" v-model="params.title" placeholder="" class="input" />
                            </div>
                        </li>
                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">轮　　播</label>
                            </div>
                            <div class="col-10">
                                <input type="radio" name="state" id="" class="radio pos-r t-4 mr-5" v-model="params.state" value="1" />
                                <span class="c-565b6d f-14 mr-15">开启</span>
                                <input type="radio" name="state" id="" class="radio pos-r t-4 mr-5" v-model="params.state" value="0" />
                                <span class="c-565b6d f-14">关闭</span>
                            </div>
                        </li>
                        <li class="row pd-10 f-14">
                            <div class="col-hd">
                                <label class="label">描　　述</label>
                            </div>
                            <div class="col-10">
                                <textarea name="info" v-model="params.info" placeholder="" class="textarea"></textarea>
                            </div>
                        </li>

                        <li class="pd-10 mt-35">
                            <div class="col-hd">
                                &nbsp;&nbsp;&nbsp;&nbsp;
                            </div>
                            <div class="col-bd row ml-35">
                                <input name="send" class="btn btn-sure ml-35" type="submit" value="确定发布" />
                                <input name="send" class="btn btn-reset ml-35" type="reset" value="重置" />
                            </div>
                        </li>

                    </ul>
                </form>
            </div>
        </div>
    </main>
             
    <% include global/all-js.html %>
        <script>
            var vm = new Vue({
                el: '.main',
                data: {
                    params: {
                        img: '',
                        title: '',
                        url: '',
                        info: '',
                        state: 0
                    }
                },
                methods: {


                    sendThumb: function () {
                        var _this = this;

                        var formData = new FormData();
                        formData.append('file', $('#thumb')[0].files[0]);
                        var thumb = $('#thumb').val().split('.')[1];

                        if (thumb != 'jpg' && thumb != 'gif' && thumb != 'jpeg' && thumb != 'png') {
                            tipsWarn(_this, "请上传图片！");
                            return false;
                        }

                        if (($('#thumb')[0].files[0].size / 1000) > 200) {
                            tipsWarn(_this, '缩略图不能超过200k');
                            return false;
                        }

                        let config = {
                            headers: { 'Content-Type': 'multipart/form-data' }
                        };

                        axios.post('/api/admin/slide/upload', formData, config)
                            .then(data => {
                                let filterData = data.data;
                                _this.params.img = filterData.data[0];
                            }).catch((error) => {
                                console.error(error)
                            })

                    },


                    slideAdd() {
                        let _this = this;
                        axios.post('/api/admin/slide/add', _this.params)
                            .then((data) => {
                                let filterData = data.data;
                                if (filterData.data.affectedRows === 1) {
                                    tips(_this, '添加成功！');
                                    _this.$router.go(-1);
                                }
                            })
                            .catch((error) => {
                                console.error(error);
                            });
                    },
                    checkForm: function () {
                        var _this = this;
                        if (!hasPermission('4')) {
                            tipsWarn(_this, '对不起,您没有操作权限^_^');
                            return
                        }
                        var fm = document.form;

                        var _this = this;
                        if (_this.params.img.length == '') {
                            tipsWarn(_this, '图片路径不得为空！^_^');
                            fm.img.focus();
                            return false;
                        }

                        if (_this.params.url.length == '') {
                            tipsWarn(_this, '链接不得为空!^_^');
                            fm.url.focus();
                            return false;
                        }

                        if (_this.params.title.length > 20) {
                            tipsWarn(_this, '标题不得大于20位!^_^');
                            fm.title.focus();
                            return false;
                        }

                        if (_this.params.info.length > 200) {
                            tipsWarn(_this, '描述不能大于200位!^_^');
                            fm.title.focus();
                            return false;
                        }
                        _this.slideAdd()
                    }
                },

                created: function () {

                },
                mounted: function () {

                }
            });
        </script>
</body>

</html>